<template>
  <div class="wrapper">
    <textarea v-model="text" @input="handleChange"></textarea>
    <button @click="handleGenQrCode">生成二维码</button>
    <canvas style="width: 200px; height: 200px;" canvas-id="qr_code"></canvas>
  </div>
</template>

<script>
import drawQrCode from 'weapp-qrcode'

export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    handleGenQrCode() {
      drawQrCode({
        width: 200,
        height: 200,
        canvasId: 'qr_code',
        text: this.text
      })
    },
    handleChange() {
      drawQrCode({
        width: 200,
        height: 200,
        canvasId: 'qr_code',
        text: this.text
      })
    }
  }
}
</script>

<style scoped>
  .wrapper {
    padding: 7px 20px 0;
    background: #EFEFF4;
  }
  textarea {
    margin-bottom: 10px;
    background: #FFFFFF;
    width: 100%;
  }
  button {
    margin-bottom: 20px;
  }
  canvas {
    margin: auto;
    padding-bottom: 20px;
  }
</style>

